<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Data Tables</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/assets/vendor/bootstrap/css/bootstrap.min.css}">
    <link th:href="@{/assets/vendor/fonts/circular-std/style.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/assets/libs/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/vendor/fonts/fontawesome/css/fontawesome-all.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/assets/vendor/datatables/css/dataTables.bootstrap4.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/assets/vendor/datatables/css/buttons.bootstrap4.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/assets/vendor/datatables/css/select.bootstrap4.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/assets/vendor/datatables/css/fixedHeader.bootstrap4.css}">
</head>

<body>
<!-- ============================================================== -->
<!-- main wrapper -->
<!-- ============================================================== -->
<div class="dashboard-main-wrapper" id="admin">
    <!-- ============================================================== -->
    <!-- navbar -->
    <!-- ============================================================== -->
    <div class="dashboard-header">
        <nav class="navbar navbar-expand-lg bg-white fixed-top">
            <a class="navbar-brand" th:href="@{/admin/index.html}">Concept</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse " id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto navbar-right-top">
                    <li class="nav-item">
                        <div id="custom-search" class="top-search-bar">
                            <input class="form-control" type="text" placeholder="Search..">
                        </div>
                    </li>
                    <li class="nav-item dropdown notification">
                        <a class="nav-link nav-icons" href="#" id="navbarDropdownMenuLink1" data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false"><i class="fas fa-fw fa-bell"></i> <span
                                class="indicator"></span></a>
                        <ul class="dropdown-menu dropdown-menu-right notification-dropdown">
                            <li>
                                <div class="notification-title"> Notification</div>
                                <div class="notification-list">
                                    <div class="list-group">
                                        <a href="#" class="list-group-item list-group-item-action active">
                                            <div class="notification-info">
                                                <div class="notification-list-user-img"><img
                                                        th:src="@{/assets/images/avatar-2.jpg}" alt=""
                                                        class="user-avatar-md rounded-circle"></div>
                                                <div class="notification-list-user-block"><span
                                                        class="notification-list-user-name">Jeremy Rakestraw</span>accepted
                                                    your invitation to join the team.
                                                    <div class="notification-date">2 min ago</div>
                                                </div>
                                            </div>
                                        </a>
                                        <a href="#" class="list-group-item list-group-item-action">
                                            <div class="notification-info">
                                                <div class="notification-list-user-img"><img
                                                        th:src="@{/assets/images/avatar-3.jpg}" alt=""
                                                        class="user-avatar-md rounded-circle"></div>
                                                <div class="notification-list-user-block"><span
                                                        class="notification-list-user-name">
John Abraham</span>is now following you
                                                    <div class="notification-date">2 days ago</div>
                                                </div>
                                            </div>
                                        </a>
                                        <a href="#" class="list-group-item list-group-item-action">
                                            <div class="notification-info">
                                                <div class="notification-list-user-img"><img
                                                        th:src="@{/assets/images/avatar-4.jpg}" alt=""
                                                        class="user-avatar-md rounded-circle"></div>
                                                <div class="notification-list-user-block"><span
                                                        class="notification-list-user-name">Monaan Pechi</span> is
                                                    watching your main repository
                                                    <div class="notification-date">2 min ago</div>
                                                </div>
                                            </div>
                                        </a>
                                        <a href="#" class="list-group-item list-group-item-action">
                                            <div class="notification-info">
                                                <div class="notification-list-user-img"><img
                                                        th:src="@{/assets/images/avatar-5.jpg}" alt=""
                                                        class="user-avatar-md rounded-circle"></div>
                                                <div class="notification-list-user-block"><span
                                                        class="notification-list-user-name">Jessica Caruso</span>accepted
                                                    your invitation to join the team.
                                                    <div class="notification-date">2 min ago</div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="list-footer"><a href="#">View all notifications</a></div>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown connection">
                        <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false"> <i class="fas fa-fw fa-th"></i> </a>
                        <ul class="dropdown-menu dropdown-menu-right connection-dropdown">
                            <li class="connection-list">
                                <div class="row">
                                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
                                        <a href="#" class="connection-item"><img th:src="@{/assets/images/github.png}"
                                                                                 alt=""> <span>Github</span></a>
                                    </div>
                                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
                                        <a href="#" class="connection-item"><img th:src="@{/assets/images/dribbble.png}"
                                                                                 alt=""> <span>Dribbble</span></a>
                                    </div>
                                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
                                        <a href="#" class="connection-item"><img th:src="@{/assets/images/dropbox.png}"
                                                                                 alt=""> <span>Dropbox</span></a>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
                                        <a href="#" class="connection-item"><img
                                                th:src="@{/assets/images/bitbucket.png}" alt=""> <span>Bitbucket</span></a>
                                    </div>
                                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
                                        <a href="#" class="connection-item"><img
                                                th:src="@{/assets/images/mail_chimp.png}" alt=""><span>Mail chimp</span></a>
                                    </div>
                                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
                                        <a href="#" class="connection-item"><img th:src="@{/assets/images/slack.png}"
                                                                                 alt=""> <span>Slack</span></a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="conntection-footer"><a href="#">More</a></div>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown nav-user">
                        <a class="nav-link nav-user-img" href="#" id="navbarDropdownMenuLink2" data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false"><img th:src="@{/assets/images/avatar-1.jpg}"
                                                                           alt="" class="user-avatar-md rounded-circle"></a>
                        <div class="dropdown-menu dropdown-menu-right nav-user-dropdown"
                             aria-labelledby="navbarDropdownMenuLink2">
                            <div class="nav-user-info">
                                <h5 class="mb-0 text-white nav-user-name">
                                    John Abraham</h5>
                                <span class="status"></span><span class="ml-2">Available</span>
                            </div>
                            <a class="dropdown-item" href="#"><i class="fas fa-user mr-2"></i>Account</a>
                            <a class="dropdown-item" href="#"><i class="fas fa-cog mr-2"></i>Setting</a>
                            <a class="dropdown-item" href="#"><i class="fas fa-power-off mr-2"></i>Logout</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <!-- ============================================================== -->
    <!-- end navbar -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- left sidebar -->
    <!-- ============================================================== -->
    <div class="nav-left-sidebar sidebar-dark">
        <div class="menu-list">
            <nav class="navbar navbar-expand-lg navbar-light">
                <a class="d-xl-none d-lg-none" href="#">Dashboard</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav flex-column">
                        <li class="nav-divider">
                            Menu
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false"
                               data-target="#submenu-1" aria-controls="submenu-1"><i
                                    class="fa fa-fw fa-user-circle"></i>Dashboard <span
                                    class="badge badge-success">6</span></a>
                            <div id="submenu-1" class="collapse submenu" style="">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="index.html" data-toggle="collapse"
                                           aria-expanded="false" data-target="#submenu-1-2" aria-controls="submenu-1-2">E-Commerce</a>
                                        <div id="submenu-1-2" class="collapse submenu" style="">
                                            <ul class="nav flex-column">
                                                <li class="nav-item">
                                                    <a class="nav-link" href="../index.html">E Commerce Dashboard</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="../ecommerce-product.html">Product
                                                        List</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="../ecommerce-product-single.html">Product
                                                        Single</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="../ecommerce-product-checkout.html">Product
                                                        Checkout</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="../dashboard-finance.html">Finance</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="../dashboard-sales.html">Sales</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false"
                                           data-target="#submenu-1-1" aria-controls="submenu-1-1">Infulencer</a>
                                        <div id="submenu-1-1" class="collapse submenu" style="">
                                            <ul class="nav flex-column">
                                                <li class="nav-item">
                                                    <a class="nav-link"
                                                       href="../dashboard-influencer.html">Influencer</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="../influencer-finder.html">Influencer
                                                        Finder</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="../influencer-profile.html">Influencer
                                                        Profile</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false"
                               data-target="#submenu-2" aria-controls="submenu-2"><i class="fa fa-fw fa-rocket"></i>UI
                                Elements</a>
                            <div id="submenu-2" class="collapse submenu" style="">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="cards.html">Cards <span class="badge badge-secondary">New</span></a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="general.html">General</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="carousel.html">Carousel</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="listgroup.html">List Group</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="typography.html">Typography</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="accordions.html">Accordions</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="tabs.html">Tabs</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false"
                               data-target="#submenu-3" aria-controls="submenu-3"><i class="fas fa-fw fa-chart-pie"></i>Chart</a>
                            <div id="submenu-3" class="collapse submenu" style="">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="chart-c3.html">C3 Charts</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="chart-chartist.html">Chartist Charts</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="chart-charts.html">Chart</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="chart-morris.html">Morris</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="chart-sparkline.html">Sparkline</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="chart-gauge.html">Guage</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false"
                               data-target="#submenu-4" aria-controls="submenu-4"><i class="fab fa-fw fa-wpforms"></i>Forms</a>
                            <div id="submenu-4" class="collapse submenu" style="">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="form-elements.html">Form Elements</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="form-validation.html">Parsely Validations</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="multiselect.html">Multiselect</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#" data-toggle="collapse" aria-expanded="true"
                               data-target="#submenu-5" aria-controls="submenu-5"><i class="fas fa-fw fa-table"></i>Tables</a>
                            <div id="submenu-5" class="collapse submenu" style="">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="general-table.html">General Tables</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link active" href="data-tables.html">Data Tables</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav-divider">
                            Features
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false"
                               data-target="#submenu-6" aria-controls="submenu-6"><i class="fas fa-fw fa-file"></i>Pages</a>
                            <div id="submenu-6" class="collapse submenu" style="">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="invoice.html">Invoice</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="blank-page.html">Blank Page</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="blank-page-header.html">Blank Page Header</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="login.html">Login</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="404-page.html">404 page</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="sign-up.html">Sign up Page</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="forgot-password.html">Forgot Password</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="pricing.html">Pricing Tables</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="timeline.html">Timeline</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="calendar.html">Calendar</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="sortable-nestable-lists.html">Sortable/Nestable
                                            List</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="widgets.html">Widgets</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="media-object.html">Media Objects</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="cropper-image.html">Cropper</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="color-picker.html">Color Picker</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false"
                               data-target="#submenu-7" aria-controls="submenu-7"><i class="fas fa-fw fa-inbox"></i>Apps
                                <span class="badge badge-secondary">New</span></a>
                            <div id="submenu-7" class="collapse submenu" style="">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="inbox.html">Inbox</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="email-details.html">Email Detail</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="email-compose.html">Email Compose</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="message-chat.html">Message Chat</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false"
                               data-target="#submenu-8" aria-controls="submenu-8"><i class="fas fa-fw fa-columns"></i>Icons</a>
                            <div id="submenu-8" class="collapse submenu" style="">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="icon-fontawesome.html">FontAwesome Icons</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="icon-material.html">Material Icons</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="icon-simple-lineicon.html">Simpleline Icon</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="icon-themify.html">Themify Icon</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="icon-flag.html">Flag Icons</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="icon-weather.html">Weather Icon</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false"
                               data-target="#submenu-9" aria-controls="submenu-9"><i
                                    class="fas fa-fw fa-map-marker-alt"></i>Maps</a>
                            <div id="submenu-9" class="collapse submenu" style="">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="map-google.html">Google Maps</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="map-vector.html">Vector Maps</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false"
                               data-target="#submenu-10" aria-controls="submenu-10"><i class="fas fa-f fa-folder"></i>Menu
                                Level</a>
                            <div id="submenu-10" class="collapse submenu" style="">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Level 1</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false"
                                           data-target="#submenu-11" aria-controls="submenu-11">Level 2</a>
                                        <div id="submenu-11" class="collapse submenu" style="">
                                            <ul class="nav flex-column">
                                                <li class="nav-item">
                                                    <a class="nav-link" href="#">Level 1</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="#">Level 2</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Level 3</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- end left sidebar -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- wrapper  -->
    <!-- ============================================================== -->
    <div class="dashboard-wrapper">
        <div class="container-fluid  dashboard-content">
            <!-- ============================================================== -->
            <!-- pageheader -->
            <!-- ============================================================== -->
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="page-header">
                        <h2 class="pageheader-title">Data Tables</h2>
                        <p class="pageheader-text">Proin placerat ante duiullam scelerisque a velit ac porta, fusce sit
                            amet vestibulum mi. Morbi lobortis pulvinar quam.</p>
                        <div class="page-breadcrumb">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Dashboard</a></li>
                                    <li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Tables</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Data Tables</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ============================================================== -->
            <!-- end pageheader -->
            <!-- ============================================================== -->
            <div class="row">
                <!-- ============================================================== -->
                <!-- basic table  -->
                <!-- ============================================================== -->
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="card">
                        <h5 class="card-header">Basic Table</h5>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <form>
                                        <div class="col-sm-12 col-md-6">
                                            <label for="service"> 热搜选择：</label>
                                            <select v-model="keyword" id="service"
                                                    class="btn btn-outline-light buttons-collection dropdown-toggle buttons-colvis"
                                                    required>
                                                <option value="weibo/hot-search" selected="selected">微博热搜榜</option>
                                                <option value="zhihu/top-search">知乎热搜</option>
                                                <option value="zhihu/billboard">知乎热榜</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-12 col-md-6">
                                            <label for="page"> 起始页面：</label>
                                            <input v-model="page" class="form-control form-control-sm" type="text"
                                                   autocomplete="off" id="page" required>
                                        </div>
                                        <div class="col-sm-12 col-md-6">
                                            <label for="per_page"> 每页大小：</label>
                                            <input v-model="per_page" class="form-control form-control-sm" type="text"
                                                   autocomplete="off" id="per_page" required>
                                        </div>
                                        <br>
                                        <div class="col-sm-12 col-md-6">
                                            <button class="btn btn-outline-light" type="submit" @click.prevent="getData"
                                                    id="searchbtn">搜索
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered first" v-model="results"
                                       v-if="results.code !== 500 && results.code !== 404">
                                    <thead v-if="results.length !== 0">
                                    <tr>
                                        <th>排名</th>
                                        <th v-if="results[0] && results[0]['keyword']">关键词</th>
                                        <th v-else-if="results[0] && results[0]['title']">标题</th>
                                        <th v-if="(results[0] && (results[0]['subTitle'] || results[0]['excerpt'])) || results[1] && results[1]['subTitle']">
                                            副标题
                                        </th>
                                        <th v-if="results[0] && (results[0]['count'] || results[0]['metrics']) || results[1] && (results[1]['count'] || results[1]['metrics'])">
                                            热度
                                        </th>
                                        <th v-if="results[0] && results[0]['flag'] || results[1] && results[1]['flag']">
                                            标签
                                        </th>
                                        <th v-if="results[0] && results[0]['answerCount'] || results[1] && results[1]['answerCount']">
                                            回答数目
                                        </th>
                                        <th v-if="results[0] && results[0]['cover']">封面</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="result in results">
                                        <td style="text-align: center;">{{result.rank}}</td>
                                        <td v-if="results[0] && results[0]['keyword']"><a :href="result.url"
                                                                                          target="_blank">{{result.keyword}}</a>
                                        </td>
                                        <td v-else-if="results[0] && results[0]['title']"><a :href="result.url"
                                                                                             target="_blank">{{result.title}}</a>
                                        </td>
                                        <td v-if="flagSubTitle">{{result.subTitle}}</td>
                                        <td v-else-if="results[0] && result['excerpt']">{{result.excerpt}}</td>
                                        <td style="text-align: center;"
                                            v-if="results[0] && results[0]['count'] || results[1] && results[1]['count']">
                                            {{result.count}}
                                        </td>
                                        <td style="text-align: center;"
                                            v-if="results[0] && results[0]['metrics'] || results[1] && results[1]['metrics']">
                                            {{result.metrics}} 万热度
                                        </td>
                                        <td style="text-align: center;"
                                            v-if="results[0] && results[0]['flag'] || results[1] && results[1]['flag']">
                                            {{result.flag}}
                                        </td>
                                        <td style="text-align: center;"
                                            v-if="results[0] && results[0]['answerCount'] || results[1] && results[1]['answerCount']">
                                            {{result.answerCount}}
                                        </td>
                                        <td v-if="result && result['cover']">
                                            <img :src="result.cover" :alt="result.title"
                                                 style="width: 105px; height: 70px; border-radius: 5px;"/>
                                        </td>
                                        <td v-else-if="result && !result['cover'] && results[0]['cover']">

                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ============================================================== -->
                <!-- end basic table  -->
                <!-- ============================================================== -->
            </div>
<!--            <div class="row">-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--                &lt;!&ndash; data table  &ndash;&gt;-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">-->
<!--                    <div class="card">-->
<!--                        <div class="card-header">-->
<!--                            <h5 class="mb-0">Data Tables - Print, Excel, CSV, PDF Buttons</h5>-->
<!--                            <p>This example shows DataTables and the Buttons extension being used with the Bootstrap 4-->
<!--                                framework providing the styling.</p>-->
<!--                        </div>-->
<!--                        <div class="card-body">-->
<!--                            <div class="col-sm-12 col-md-6">-->
<!--                                <form>-->
<!--                                    <div class="col-sm-12 col-md-6">-->
<!--                                        <label for="service"> 热搜选择：</label>-->
<!--                                        <select v-model="keyword" id="service"-->
<!--                                                class="btn btn-outline-light buttons-collection dropdown-toggle buttons-colvis"-->
<!--                                                required>-->
<!--                                            <option value="weibo/hot-search" selected="selected">微博热搜榜</option>-->
<!--                                            <option value="zhihu/top-search">知乎热搜</option>-->
<!--                                            <option value="zhihu/billboard">知乎热榜</option>-->
<!--                                        </select>-->
<!--                                    </div>-->
<!--                                    <div class="col-sm-12 col-md-6">-->
<!--                                        <label for="page"> 起始页面：</label>-->
<!--                                        <input v-model="page" class="form-control form-control-sm" type="text"-->
<!--                                               autocomplete="off" id="page" required>-->
<!--                                    </div>-->
<!--                                    <div class="col-sm-12 col-md-6">-->
<!--                                        <label for="per_page"> 每页大小：</label>-->
<!--                                        <input v-model="per_page" class="form-control form-control-sm" type="text"-->
<!--                                               autocomplete="off" id="per_page" required>-->
<!--                                    </div>-->
<!--                                    <br>-->
<!--                                    <div class="col-sm-12 col-md-6">-->
<!--                                        <button class="btn btn-outline-light" type="submit" @click.prevent="getData"-->
<!--                                                id="searchbtn">搜索-->
<!--                                        </button>-->
<!--                                    </div>-->
<!--                                </form>-->
<!--                            </div>-->
<!--                            <div class="table-responsive">-->
<!--                                <table id="example" class="table table-striped table-bordered second"-->
<!--                                       style="width:100%" v-model="results">-->
<!--                                    <thead>-->
<!--                                    <tr>-->
<!--                                        <th>排名</th>-->
<!--                                        <th v-if="results[0] && results[0]['keyword']">关键词</th>-->
<!--                                        <th v-else-if="results[0] && results[0]['title']">标题</th>-->
<!--                                        <th v-if="(results[0] && (results[0]['subTitle'] || results[0]['excerpt'])) || results[1] && results[1]['subTitle']">-->
<!--                                            副标题-->
<!--                                        </th>-->
<!--                                        <th v-if="results[0] && (results[0]['count'] || results[0]['metrics']) || results[1] && (results[1]['count'] || results[1]['metrics'])">-->
<!--                                            热度-->
<!--                                        </th>-->
<!--                                        <th v-if="results[0] && results[0]['flag'] || results[1] && results[1]['flag']">-->
<!--                                            标签-->
<!--                                        </th>-->
<!--                                        <th v-if="results[0] && results[0]['answerCount'] || results[1] && results[1]['answerCount']">-->
<!--                                            回答数目-->
<!--                                        </th>-->
<!--                                        <th v-if="results[0] && results[0]['cover']">封面</th>-->
<!--                                    </tr>-->
<!--                                    </thead>-->
<!--                                    <tbody>-->
<!--                                    <tr v-for="result in results">-->
<!--                                        <td style="text-align: center;">{{result.rank}}</td>-->
<!--                                        <td v-if="results[0] && results[0]['keyword']"><a :href="result.url"-->
<!--                                                                                          target="_blank">{{result.keyword}}</a>-->
<!--                                        </td>-->
<!--                                        <td v-else-if="results[0] && results[0]['title']"><a :href="result.url"-->
<!--                                                                                             target="_blank">{{result.title}}</a>-->
<!--                                        </td>-->
<!--                                        <td v-if="flagSubTitle">{{result.subTitle}}</td>-->
<!--                                        <td v-else-if="results[0] && results[0]['excerpt']">{{result.excerpt}}</td>-->
<!--                                        <td style="text-align: center;"-->
<!--                                            v-if="results[0] && results[0]['count'] || results[1] && results[1]['count']">-->
<!--                                            {{result.count}}-->
<!--                                        </td>-->
<!--                                        <td style="text-align: center;"-->
<!--                                            v-if="results[0] && results[0]['metrics'] || results[1] && results[1]['metrics']">-->
<!--                                            {{result.metrics}} 万热度-->
<!--                                        </td>-->
<!--                                        <td style="text-align: center;"-->
<!--                                            v-if="results[0] && results[0]['flag'] || results[1] && results[1]['flag']">-->
<!--                                            {{result.flag}}-->
<!--                                        </td>-->
<!--                                        <td style="text-align: center;"-->
<!--                                            v-if="results[0] && results[0]['answerCount'] || results[1] && results[1]['answerCount']">-->
<!--                                            {{result.answerCount}}-->
<!--                                        </td>-->
<!--                                        <td v-if="result && result['cover']">-->
<!--                                            <img :src="result.cover" :alt="result.title"-->
<!--                                                 style="width: 105px; height: 70px; border-radius: 5px;"/>-->
<!--                                        </td>-->
<!--                                        <td v-else-if="result && !result['cover'] && results[0]['cover']">-->

<!--                                        </td>-->
<!--                                    </tr>-->
<!--                                    </tbody>-->
<!--                                </table>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--                &lt;!&ndash; end data table  &ndash;&gt;-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--            </div>-->
<!--            <div class="row">-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--                &lt;!&ndash; data table rowgroup  &ndash;&gt;-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">-->
<!--                    <div class="card">-->
<!--                        <div class="card-header">-->
<!--                            <h5 class="mb-0">Data Tables - RowGroup extension </h5>-->
<!--                            <p>This example shows DataTables and the RowGroup extension being used with Bootstrap 4-->
<!--                                providing the styling.</p>-->
<!--                        </div>-->
<!--                        <div class="card-body">-->
<!--                            <div class="table-responsive">-->
<!--                                <table id="example2" class="table table-striped table-bordered" style="width:100%">-->
<!--                                    <thead>-->
<!--                                    <tr>-->
<!--                                        <th>Name</th>-->
<!--                                        <th>Position</th>-->
<!--                                        <th>Office</th>-->
<!--                                        <th>Age</th>-->
<!--                                        <th>Start date</th>-->
<!--                                        <th>Salary</th>-->
<!--                                    </tr>-->
<!--                                    </thead>-->
<!--                                    <tbody>-->
<!--                                    <tr>-->
<!--                                        <td>Tiger Nixon</td>-->
<!--                                        <td>System Architect</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>61</td>-->
<!--                                        <td>2011/04/25</td>-->
<!--                                        <td>$320,800</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Garrett Winters</td>-->
<!--                                        <td>Accountant</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>63</td>-->
<!--                                        <td>2011/07/25</td>-->
<!--                                        <td>$170,750</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Ashton Cox</td>-->
<!--                                        <td>Junior Technical Author</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>66</td>-->
<!--                                        <td>2009/01/12</td>-->
<!--                                        <td>$86,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Cedric Kelly</td>-->
<!--                                        <td>Senior Javascript Developer</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>22</td>-->
<!--                                        <td>2012/03/29</td>-->
<!--                                        <td>$433,060</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Airi Satou</td>-->
<!--                                        <td>Accountant</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>33</td>-->
<!--                                        <td>2008/11/28</td>-->
<!--                                        <td>$162,700</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Brielle Williamson</td>-->
<!--                                        <td>Integration Specialist</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>61</td>-->
<!--                                        <td>2012/12/02</td>-->
<!--                                        <td>$372,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Herrod Chandler</td>-->
<!--                                        <td>Sales Assistant</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>59</td>-->
<!--                                        <td>2012/08/06</td>-->
<!--                                        <td>$137,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Rhona Davidson</td>-->
<!--                                        <td>Integration Specialist</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>55</td>-->
<!--                                        <td>2010/10/14</td>-->
<!--                                        <td>$327,900</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Colleen Hurst</td>-->
<!--                                        <td>Javascript Developer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>39</td>-->
<!--                                        <td>2009/09/15</td>-->
<!--                                        <td>$205,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Sonya Frost</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>23</td>-->
<!--                                        <td>2008/12/13</td>-->
<!--                                        <td>$103,600</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jena Gaines</td>-->
<!--                                        <td>Office Manager</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>30</td>-->
<!--                                        <td>2008/12/19</td>-->
<!--                                        <td>$90,560</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Quinn Flynn</td>-->
<!--                                        <td>Support Lead</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>22</td>-->
<!--                                        <td>2013/03/03</td>-->
<!--                                        <td>$342,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Charde Marshall</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>36</td>-->
<!--                                        <td>2008/10/16</td>-->
<!--                                        <td>$470,600</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Haley Kennedy</td>-->
<!--                                        <td>Senior Marketing Designer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>43</td>-->
<!--                                        <td>2012/12/18</td>-->
<!--                                        <td>$313,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Tatyana Fitzpatrick</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>19</td>-->
<!--                                        <td>2010/03/17</td>-->
<!--                                        <td>$385,750</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Michael Silva</td>-->
<!--                                        <td>Marketing Designer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>66</td>-->
<!--                                        <td>2012/11/27</td>-->
<!--                                        <td>$198,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Paul Byrd</td>-->
<!--                                        <td>Chief Financial Officer (CFO)</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>64</td>-->
<!--                                        <td>2010/06/09</td>-->
<!--                                        <td>$725,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Gloria Little</td>-->
<!--                                        <td>Systems Administrator</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>59</td>-->
<!--                                        <td>2009/04/10</td>-->
<!--                                        <td>$237,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Bradley Greer</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>41</td>-->
<!--                                        <td>2012/10/13</td>-->
<!--                                        <td>$132,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Dai Rios</td>-->
<!--                                        <td>Personnel Lead</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>35</td>-->
<!--                                        <td>2012/09/26</td>-->
<!--                                        <td>$217,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jenette Caldwell</td>-->
<!--                                        <td>Development Lead</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>30</td>-->
<!--                                        <td>2011/09/03</td>-->
<!--                                        <td>$345,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Yuri Berry</td>-->
<!--                                        <td>Chief Marketing Officer (CMO)</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>40</td>-->
<!--                                        <td>2009/06/25</td>-->
<!--                                        <td>$675,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Caesar Vance</td>-->
<!--                                        <td>Pre-Sales Support</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>21</td>-->
<!--                                        <td>2011/12/12</td>-->
<!--                                        <td>$106,450</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Doris Wilder</td>-->
<!--                                        <td>Sales Assistant</td>-->
<!--                                        <td>Sidney</td>-->
<!--                                        <td>23</td>-->
<!--                                        <td>2010/09/20</td>-->
<!--                                        <td>$85,600</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Angelica Ramos</td>-->
<!--                                        <td>Chief Executive Officer (CEO)</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>47</td>-->
<!--                                        <td>2009/10/09</td>-->
<!--                                        <td>$1,200,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Gavin Joyce</td>-->
<!--                                        <td>Developer</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>42</td>-->
<!--                                        <td>2010/12/22</td>-->
<!--                                        <td>$92,575</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jennifer Chang</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>Singapore</td>-->
<!--                                        <td>28</td>-->
<!--                                        <td>2010/11/14</td>-->
<!--                                        <td>$357,650</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Brenden Wagner</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>28</td>-->
<!--                                        <td>2011/06/07</td>-->
<!--                                        <td>$206,850</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Fiona Green</td>-->
<!--                                        <td>Chief Operating Officer (COO)</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>48</td>-->
<!--                                        <td>2010/03/11</td>-->
<!--                                        <td>$850,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Shou Itou</td>-->
<!--                                        <td>Regional Marketing</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>20</td>-->
<!--                                        <td>2011/08/14</td>-->
<!--                                        <td>$163,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Michelle House</td>-->
<!--                                        <td>Integration Specialist</td>-->
<!--                                        <td>Sidney</td>-->
<!--                                        <td>37</td>-->
<!--                                        <td>2011/06/02</td>-->
<!--                                        <td>$95,400</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Suki Burks</td>-->
<!--                                        <td>Developer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>53</td>-->
<!--                                        <td>2009/10/22</td>-->
<!--                                        <td>$114,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Prescott Bartlett</td>-->
<!--                                        <td>Technical Author</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>27</td>-->
<!--                                        <td>2011/05/07</td>-->
<!--                                        <td>$145,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Gavin Cortez</td>-->
<!--                                        <td>Team Leader</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>22</td>-->
<!--                                        <td>2008/10/26</td>-->
<!--                                        <td>$235,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Martena Mccray</td>-->
<!--                                        <td>Post-Sales support</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>46</td>-->
<!--                                        <td>2011/03/09</td>-->
<!--                                        <td>$324,050</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Unity Butler</td>-->
<!--                                        <td>Marketing Designer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>47</td>-->
<!--                                        <td>2009/12/09</td>-->
<!--                                        <td>$85,675</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Howard Hatfield</td>-->
<!--                                        <td>Office Manager</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>51</td>-->
<!--                                        <td>2008/12/16</td>-->
<!--                                        <td>$164,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Hope Fuentes</td>-->
<!--                                        <td>Secretary</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>41</td>-->
<!--                                        <td>2010/02/12</td>-->
<!--                                        <td>$109,850</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Vivian Harrell</td>-->
<!--                                        <td>Financial Controller</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>62</td>-->
<!--                                        <td>2009/02/14</td>-->
<!--                                        <td>$452,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Timothy Mooney</td>-->
<!--                                        <td>Office Manager</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>37</td>-->
<!--                                        <td>2008/12/11</td>-->
<!--                                        <td>$136,200</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jackson Bradshaw</td>-->
<!--                                        <td>Director</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>65</td>-->
<!--                                        <td>2008/09/26</td>-->
<!--                                        <td>$645,750</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Olivia Liang</td>-->
<!--                                        <td>Support Engineer</td>-->
<!--                                        <td>Singapore</td>-->
<!--                                        <td>64</td>-->
<!--                                        <td>2011/02/03</td>-->
<!--                                        <td>$234,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Bruno Nash</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>38</td>-->
<!--                                        <td>2011/05/03</td>-->
<!--                                        <td>$163,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Sakura Yamamoto</td>-->
<!--                                        <td>Support Engineer</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>37</td>-->
<!--                                        <td>2009/08/19</td>-->
<!--                                        <td>$139,575</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Thor Walton</td>-->
<!--                                        <td>Developer</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>61</td>-->
<!--                                        <td>2013/08/11</td>-->
<!--                                        <td>$98,540</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Finn Camacho</td>-->
<!--                                        <td>Support Engineer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>47</td>-->
<!--                                        <td>2009/07/07</td>-->
<!--                                        <td>$87,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Serge Baldwin</td>-->
<!--                                        <td>Data Coordinator</td>-->
<!--                                        <td>Singapore</td>-->
<!--                                        <td>64</td>-->
<!--                                        <td>2012/04/09</td>-->
<!--                                        <td>$138,575</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Zenaida Frank</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>63</td>-->
<!--                                        <td>2010/01/04</td>-->
<!--                                        <td>$125,250</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Zorita Serrano</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>56</td>-->
<!--                                        <td>2012/06/01</td>-->
<!--                                        <td>$115,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jennifer Acosta</td>-->
<!--                                        <td>Junior Javascript Developer</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>43</td>-->
<!--                                        <td>2013/02/01</td>-->
<!--                                        <td>$75,650</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Cara Stevens</td>-->
<!--                                        <td>Sales Assistant</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>46</td>-->
<!--                                        <td>2011/12/06</td>-->
<!--                                        <td>$145,600</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Hermione Butler</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>47</td>-->
<!--                                        <td>2011/03/21</td>-->
<!--                                        <td>$356,250</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Lael Greer</td>-->
<!--                                        <td>Systems Administrator</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>21</td>-->
<!--                                        <td>2009/02/27</td>-->
<!--                                        <td>$103,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jonas Alexander</td>-->
<!--                                        <td>Developer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>30</td>-->
<!--                                        <td>2010/07/14</td>-->
<!--                                        <td>$86,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Shad Decker</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>51</td>-->
<!--                                        <td>2008/11/13</td>-->
<!--                                        <td>$183,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Michael Bruce</td>-->
<!--                                        <td>Javascript Developer</td>-->
<!--                                        <td>Singapore</td>-->
<!--                                        <td>29</td>-->
<!--                                        <td>2011/06/27</td>-->
<!--                                        <td>$183,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Donna Snider</td>-->
<!--                                        <td>Customer Support</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>27</td>-->
<!--                                        <td>2011/01/25</td>-->
<!--                                        <td>$112,000</td>-->
<!--                                    </tr>-->
<!--                                    </tbody>-->
<!--                                    <tfoot>-->
<!--                                    <tr>-->
<!--                                        <th>Name</th>-->
<!--                                        <th>Position</th>-->
<!--                                        <th>Office</th>-->
<!--                                        <th>Age</th>-->
<!--                                        <th>Start date</th>-->
<!--                                        <th>Salary</th>-->
<!--                                    </tr>-->
<!--                                    </tfoot>-->
<!--                                </table>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--                &lt;!&ndash; end data table rowgroup  &ndash;&gt;-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--            </div>-->
<!--            <div class="row">-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--                &lt;!&ndash; fixed header  &ndash;&gt;-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">-->
<!--                    <div class="card">-->
<!--                        <div class="card-header">-->
<!--                            <h5 class="mb-0">Data Tables - Fixed Header </h5>-->
<!--                            <p>This example shows FixedHeader being styled by the Bootstrap 4 CSS framework.</p>-->
<!--                        </div>-->
<!--                        <div class="card-body">-->
<!--                            <div class="table-responsive">-->
<!--                                <table id="example4" class="table table-striped table-bordered" style="width:100%">-->
<!--                                    <thead>-->
<!--                                    <tr>-->
<!--                                        <th>Name</th>-->
<!--                                        <th>Position</th>-->
<!--                                        <th>Office</th>-->
<!--                                        <th>Age</th>-->
<!--                                        <th>Start date</th>-->
<!--                                        <th>Salary</th>-->
<!--                                    </tr>-->
<!--                                    </thead>-->
<!--                                    <tbody>-->
<!--                                    <tr>-->
<!--                                        <td>Tiger Nixon</td>-->
<!--                                        <td>System Architect</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>61</td>-->
<!--                                        <td>2011/04/25</td>-->
<!--                                        <td>$320,800</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Garrett Winters</td>-->
<!--                                        <td>Accountant</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>63</td>-->
<!--                                        <td>2011/07/25</td>-->
<!--                                        <td>$170,750</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Ashton Cox</td>-->
<!--                                        <td>Junior Technical Author</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>66</td>-->
<!--                                        <td>2009/01/12</td>-->
<!--                                        <td>$86,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Cedric Kelly</td>-->
<!--                                        <td>Senior Javascript Developer</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>22</td>-->
<!--                                        <td>2012/03/29</td>-->
<!--                                        <td>$433,060</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Airi Satou</td>-->
<!--                                        <td>Accountant</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>33</td>-->
<!--                                        <td>2008/11/28</td>-->
<!--                                        <td>$162,700</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Brielle Williamson</td>-->
<!--                                        <td>Integration Specialist</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>61</td>-->
<!--                                        <td>2012/12/02</td>-->
<!--                                        <td>$372,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Herrod Chandler</td>-->
<!--                                        <td>Sales Assistant</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>59</td>-->
<!--                                        <td>2012/08/06</td>-->
<!--                                        <td>$137,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Rhona Davidson</td>-->
<!--                                        <td>Integration Specialist</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>55</td>-->
<!--                                        <td>2010/10/14</td>-->
<!--                                        <td>$327,900</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Colleen Hurst</td>-->
<!--                                        <td>Javascript Developer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>39</td>-->
<!--                                        <td>2009/09/15</td>-->
<!--                                        <td>$205,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Sonya Frost</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>23</td>-->
<!--                                        <td>2008/12/13</td>-->
<!--                                        <td>$103,600</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jena Gaines</td>-->
<!--                                        <td>Office Manager</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>30</td>-->
<!--                                        <td>2008/12/19</td>-->
<!--                                        <td>$90,560</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Quinn Flynn</td>-->
<!--                                        <td>Support Lead</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>22</td>-->
<!--                                        <td>2013/03/03</td>-->
<!--                                        <td>$342,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Charde Marshall</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>36</td>-->
<!--                                        <td>2008/10/16</td>-->
<!--                                        <td>$470,600</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Haley Kennedy</td>-->
<!--                                        <td>Senior Marketing Designer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>43</td>-->
<!--                                        <td>2012/12/18</td>-->
<!--                                        <td>$313,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Tatyana Fitzpatrick</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>19</td>-->
<!--                                        <td>2010/03/17</td>-->
<!--                                        <td>$385,750</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Michael Silva</td>-->
<!--                                        <td>Marketing Designer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>66</td>-->
<!--                                        <td>2012/11/27</td>-->
<!--                                        <td>$198,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Paul Byrd</td>-->
<!--                                        <td>Chief Financial Officer (CFO)</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>64</td>-->
<!--                                        <td>2010/06/09</td>-->
<!--                                        <td>$725,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Gloria Little</td>-->
<!--                                        <td>Systems Administrator</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>59</td>-->
<!--                                        <td>2009/04/10</td>-->
<!--                                        <td>$237,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Bradley Greer</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>41</td>-->
<!--                                        <td>2012/10/13</td>-->
<!--                                        <td>$132,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Dai Rios</td>-->
<!--                                        <td>Personnel Lead</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>35</td>-->
<!--                                        <td>2012/09/26</td>-->
<!--                                        <td>$217,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jenette Caldwell</td>-->
<!--                                        <td>Development Lead</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>30</td>-->
<!--                                        <td>2011/09/03</td>-->
<!--                                        <td>$345,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Yuri Berry</td>-->
<!--                                        <td>Chief Marketing Officer (CMO)</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>40</td>-->
<!--                                        <td>2009/06/25</td>-->
<!--                                        <td>$675,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Caesar Vance</td>-->
<!--                                        <td>Pre-Sales Support</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>21</td>-->
<!--                                        <td>2011/12/12</td>-->
<!--                                        <td>$106,450</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Doris Wilder</td>-->
<!--                                        <td>Sales Assistant</td>-->
<!--                                        <td>Sidney</td>-->
<!--                                        <td>23</td>-->
<!--                                        <td>2010/09/20</td>-->
<!--                                        <td>$85,600</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Angelica Ramos</td>-->
<!--                                        <td>Chief Executive Officer (CEO)</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>47</td>-->
<!--                                        <td>2009/10/09</td>-->
<!--                                        <td>$1,200,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Gavin Joyce</td>-->
<!--                                        <td>Developer</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>42</td>-->
<!--                                        <td>2010/12/22</td>-->
<!--                                        <td>$92,575</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jennifer Chang</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>Singapore</td>-->
<!--                                        <td>28</td>-->
<!--                                        <td>2010/11/14</td>-->
<!--                                        <td>$357,650</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Brenden Wagner</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>28</td>-->
<!--                                        <td>2011/06/07</td>-->
<!--                                        <td>$206,850</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Fiona Green</td>-->
<!--                                        <td>Chief Operating Officer (COO)</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>48</td>-->
<!--                                        <td>2010/03/11</td>-->
<!--                                        <td>$850,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Shou Itou</td>-->
<!--                                        <td>Regional Marketing</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>20</td>-->
<!--                                        <td>2011/08/14</td>-->
<!--                                        <td>$163,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Michelle House</td>-->
<!--                                        <td>Integration Specialist</td>-->
<!--                                        <td>Sidney</td>-->
<!--                                        <td>37</td>-->
<!--                                        <td>2011/06/02</td>-->
<!--                                        <td>$95,400</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Suki Burks</td>-->
<!--                                        <td>Developer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>53</td>-->
<!--                                        <td>2009/10/22</td>-->
<!--                                        <td>$114,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Prescott Bartlett</td>-->
<!--                                        <td>Technical Author</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>27</td>-->
<!--                                        <td>2011/05/07</td>-->
<!--                                        <td>$145,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Gavin Cortez</td>-->
<!--                                        <td>Team Leader</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>22</td>-->
<!--                                        <td>2008/10/26</td>-->
<!--                                        <td>$235,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Martena Mccray</td>-->
<!--                                        <td>Post-Sales support</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>46</td>-->
<!--                                        <td>2011/03/09</td>-->
<!--                                        <td>$324,050</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Unity Butler</td>-->
<!--                                        <td>Marketing Designer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>47</td>-->
<!--                                        <td>2009/12/09</td>-->
<!--                                        <td>$85,675</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Howard Hatfield</td>-->
<!--                                        <td>Office Manager</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>51</td>-->
<!--                                        <td>2008/12/16</td>-->
<!--                                        <td>$164,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Hope Fuentes</td>-->
<!--                                        <td>Secretary</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>41</td>-->
<!--                                        <td>2010/02/12</td>-->
<!--                                        <td>$109,850</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Vivian Harrell</td>-->
<!--                                        <td>Financial Controller</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>62</td>-->
<!--                                        <td>2009/02/14</td>-->
<!--                                        <td>$452,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Timothy Mooney</td>-->
<!--                                        <td>Office Manager</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>37</td>-->
<!--                                        <td>2008/12/11</td>-->
<!--                                        <td>$136,200</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jackson Bradshaw</td>-->
<!--                                        <td>Director</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>65</td>-->
<!--                                        <td>2008/09/26</td>-->
<!--                                        <td>$645,750</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Olivia Liang</td>-->
<!--                                        <td>Support Engineer</td>-->
<!--                                        <td>Singapore</td>-->
<!--                                        <td>64</td>-->
<!--                                        <td>2011/02/03</td>-->
<!--                                        <td>$234,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Bruno Nash</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>38</td>-->
<!--                                        <td>2011/05/03</td>-->
<!--                                        <td>$163,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Sakura Yamamoto</td>-->
<!--                                        <td>Support Engineer</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>37</td>-->
<!--                                        <td>2009/08/19</td>-->
<!--                                        <td>$139,575</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Thor Walton</td>-->
<!--                                        <td>Developer</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>61</td>-->
<!--                                        <td>2013/08/11</td>-->
<!--                                        <td>$98,540</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Finn Camacho</td>-->
<!--                                        <td>Support Engineer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>47</td>-->
<!--                                        <td>2009/07/07</td>-->
<!--                                        <td>$87,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Serge Baldwin</td>-->
<!--                                        <td>Data Coordinator</td>-->
<!--                                        <td>Singapore</td>-->
<!--                                        <td>64</td>-->
<!--                                        <td>2012/04/09</td>-->
<!--                                        <td>$138,575</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Zenaida Frank</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>63</td>-->
<!--                                        <td>2010/01/04</td>-->
<!--                                        <td>$125,250</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Zorita Serrano</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>56</td>-->
<!--                                        <td>2012/06/01</td>-->
<!--                                        <td>$115,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jennifer Acosta</td>-->
<!--                                        <td>Junior Javascript Developer</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>43</td>-->
<!--                                        <td>2013/02/01</td>-->
<!--                                        <td>$75,650</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Cara Stevens</td>-->
<!--                                        <td>Sales Assistant</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>46</td>-->
<!--                                        <td>2011/12/06</td>-->
<!--                                        <td>$145,600</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Hermione Butler</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>47</td>-->
<!--                                        <td>2011/03/21</td>-->
<!--                                        <td>$356,250</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Lael Greer</td>-->
<!--                                        <td>Systems Administrator</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>21</td>-->
<!--                                        <td>2009/02/27</td>-->
<!--                                        <td>$103,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jonas Alexander</td>-->
<!--                                        <td>Developer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>30</td>-->
<!--                                        <td>2010/07/14</td>-->
<!--                                        <td>$86,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Shad Decker</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>51</td>-->
<!--                                        <td>2008/11/13</td>-->
<!--                                        <td>$183,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Michael Bruce</td>-->
<!--                                        <td>Javascript Developer</td>-->
<!--                                        <td>Singapore</td>-->
<!--                                        <td>29</td>-->
<!--                                        <td>2011/06/27</td>-->
<!--                                        <td>$183,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Donna Snider</td>-->
<!--                                        <td>Customer Support</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>27</td>-->
<!--                                        <td>2011/01/25</td>-->
<!--                                        <td>$112,000</td>-->
<!--                                    </tr>-->
<!--                                    </tbody>-->
<!--                                    <tfoot>-->
<!--                                    <tr>-->
<!--                                        <th>Name</th>-->
<!--                                        <th>Position</th>-->
<!--                                        <th>Office</th>-->
<!--                                        <th>Age</th>-->
<!--                                        <th>Start date</th>-->
<!--                                        <th>Salary</th>-->
<!--                                    </tr>-->
<!--                                    </tfoot>-->
<!--                                </table>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--                &lt;!&ndash; end fixed header  &ndash;&gt;-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--            </div>-->
<!--            <div class="row">-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--                &lt;!&ndash; data table multiselects  &ndash;&gt;-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">-->
<!--                    <div class="card">-->
<!--                        <div class="card-header">-->
<!--                            <h5 class="mb-0">Data Tables - Multi item selection </h5>-->
<!--                            <p>This example shows DataTables and the Select extension being used with Bootstrap 4-->
<!--                                providing the styling.</p>-->
<!--                        </div>-->
<!--                        <div class="card-body">-->
<!--                            <div class="table-responsive">-->
<!--                                <table id="example3" class="table table-striped table-bordered" style="width:100%">-->
<!--                                    <thead>-->
<!--                                    <tr>-->
<!--                                        <th>Name</th>-->
<!--                                        <th>Position</th>-->
<!--                                        <th>Office</th>-->
<!--                                        <th>Age</th>-->
<!--                                        <th>Start date</th>-->
<!--                                        <th>Salary</th>-->
<!--                                    </tr>-->
<!--                                    </thead>-->
<!--                                    <tbody>-->
<!--                                    <tr>-->
<!--                                        <td>Tiger Nixon</td>-->
<!--                                        <td>System Architect</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>61</td>-->
<!--                                        <td>2011/04/25</td>-->
<!--                                        <td>$320,800</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Garrett Winters</td>-->
<!--                                        <td>Accountant</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>63</td>-->
<!--                                        <td>2011/07/25</td>-->
<!--                                        <td>$170,750</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Ashton Cox</td>-->
<!--                                        <td>Junior Technical Author</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>66</td>-->
<!--                                        <td>2009/01/12</td>-->
<!--                                        <td>$86,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Cedric Kelly</td>-->
<!--                                        <td>Senior Javascript Developer</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>22</td>-->
<!--                                        <td>2012/03/29</td>-->
<!--                                        <td>$433,060</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Airi Satou</td>-->
<!--                                        <td>Accountant</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>33</td>-->
<!--                                        <td>2008/11/28</td>-->
<!--                                        <td>$162,700</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Brielle Williamson</td>-->
<!--                                        <td>Integration Specialist</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>61</td>-->
<!--                                        <td>2012/12/02</td>-->
<!--                                        <td>$372,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Herrod Chandler</td>-->
<!--                                        <td>Sales Assistant</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>59</td>-->
<!--                                        <td>2012/08/06</td>-->
<!--                                        <td>$137,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Rhona Davidson</td>-->
<!--                                        <td>Integration Specialist</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>55</td>-->
<!--                                        <td>2010/10/14</td>-->
<!--                                        <td>$327,900</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Colleen Hurst</td>-->
<!--                                        <td>Javascript Developer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>39</td>-->
<!--                                        <td>2009/09/15</td>-->
<!--                                        <td>$205,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Sonya Frost</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>23</td>-->
<!--                                        <td>2008/12/13</td>-->
<!--                                        <td>$103,600</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jena Gaines</td>-->
<!--                                        <td>Office Manager</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>30</td>-->
<!--                                        <td>2008/12/19</td>-->
<!--                                        <td>$90,560</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Quinn Flynn</td>-->
<!--                                        <td>Support Lead</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>22</td>-->
<!--                                        <td>2013/03/03</td>-->
<!--                                        <td>$342,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Charde Marshall</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>36</td>-->
<!--                                        <td>2008/10/16</td>-->
<!--                                        <td>$470,600</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Haley Kennedy</td>-->
<!--                                        <td>Senior Marketing Designer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>43</td>-->
<!--                                        <td>2012/12/18</td>-->
<!--                                        <td>$313,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Tatyana Fitzpatrick</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>19</td>-->
<!--                                        <td>2010/03/17</td>-->
<!--                                        <td>$385,750</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Michael Silva</td>-->
<!--                                        <td>Marketing Designer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>66</td>-->
<!--                                        <td>2012/11/27</td>-->
<!--                                        <td>$198,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Paul Byrd</td>-->
<!--                                        <td>Chief Financial Officer (CFO)</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>64</td>-->
<!--                                        <td>2010/06/09</td>-->
<!--                                        <td>$725,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Gloria Little</td>-->
<!--                                        <td>Systems Administrator</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>59</td>-->
<!--                                        <td>2009/04/10</td>-->
<!--                                        <td>$237,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Bradley Greer</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>41</td>-->
<!--                                        <td>2012/10/13</td>-->
<!--                                        <td>$132,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Dai Rios</td>-->
<!--                                        <td>Personnel Lead</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>35</td>-->
<!--                                        <td>2012/09/26</td>-->
<!--                                        <td>$217,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jenette Caldwell</td>-->
<!--                                        <td>Development Lead</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>30</td>-->
<!--                                        <td>2011/09/03</td>-->
<!--                                        <td>$345,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Yuri Berry</td>-->
<!--                                        <td>Chief Marketing Officer (CMO)</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>40</td>-->
<!--                                        <td>2009/06/25</td>-->
<!--                                        <td>$675,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Caesar Vance</td>-->
<!--                                        <td>Pre-Sales Support</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>21</td>-->
<!--                                        <td>2011/12/12</td>-->
<!--                                        <td>$106,450</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Doris Wilder</td>-->
<!--                                        <td>Sales Assistant</td>-->
<!--                                        <td>Sidney</td>-->
<!--                                        <td>23</td>-->
<!--                                        <td>2010/09/20</td>-->
<!--                                        <td>$85,600</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Angelica Ramos</td>-->
<!--                                        <td>Chief Executive Officer (CEO)</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>47</td>-->
<!--                                        <td>2009/10/09</td>-->
<!--                                        <td>$1,200,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Gavin Joyce</td>-->
<!--                                        <td>Developer</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>42</td>-->
<!--                                        <td>2010/12/22</td>-->
<!--                                        <td>$92,575</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jennifer Chang</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>Singapore</td>-->
<!--                                        <td>28</td>-->
<!--                                        <td>2010/11/14</td>-->
<!--                                        <td>$357,650</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Brenden Wagner</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>28</td>-->
<!--                                        <td>2011/06/07</td>-->
<!--                                        <td>$206,850</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Fiona Green</td>-->
<!--                                        <td>Chief Operating Officer (COO)</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>48</td>-->
<!--                                        <td>2010/03/11</td>-->
<!--                                        <td>$850,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Shou Itou</td>-->
<!--                                        <td>Regional Marketing</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>20</td>-->
<!--                                        <td>2011/08/14</td>-->
<!--                                        <td>$163,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Michelle House</td>-->
<!--                                        <td>Integration Specialist</td>-->
<!--                                        <td>Sidney</td>-->
<!--                                        <td>37</td>-->
<!--                                        <td>2011/06/02</td>-->
<!--                                        <td>$95,400</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Suki Burks</td>-->
<!--                                        <td>Developer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>53</td>-->
<!--                                        <td>2009/10/22</td>-->
<!--                                        <td>$114,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Prescott Bartlett</td>-->
<!--                                        <td>Technical Author</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>27</td>-->
<!--                                        <td>2011/05/07</td>-->
<!--                                        <td>$145,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Gavin Cortez</td>-->
<!--                                        <td>Team Leader</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>22</td>-->
<!--                                        <td>2008/10/26</td>-->
<!--                                        <td>$235,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Martena Mccray</td>-->
<!--                                        <td>Post-Sales support</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>46</td>-->
<!--                                        <td>2011/03/09</td>-->
<!--                                        <td>$324,050</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Unity Butler</td>-->
<!--                                        <td>Marketing Designer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>47</td>-->
<!--                                        <td>2009/12/09</td>-->
<!--                                        <td>$85,675</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Howard Hatfield</td>-->
<!--                                        <td>Office Manager</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>51</td>-->
<!--                                        <td>2008/12/16</td>-->
<!--                                        <td>$164,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Hope Fuentes</td>-->
<!--                                        <td>Secretary</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>41</td>-->
<!--                                        <td>2010/02/12</td>-->
<!--                                        <td>$109,850</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Vivian Harrell</td>-->
<!--                                        <td>Financial Controller</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>62</td>-->
<!--                                        <td>2009/02/14</td>-->
<!--                                        <td>$452,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Timothy Mooney</td>-->
<!--                                        <td>Office Manager</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>37</td>-->
<!--                                        <td>2008/12/11</td>-->
<!--                                        <td>$136,200</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jackson Bradshaw</td>-->
<!--                                        <td>Director</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>65</td>-->
<!--                                        <td>2008/09/26</td>-->
<!--                                        <td>$645,750</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Olivia Liang</td>-->
<!--                                        <td>Support Engineer</td>-->
<!--                                        <td>Singapore</td>-->
<!--                                        <td>64</td>-->
<!--                                        <td>2011/02/03</td>-->
<!--                                        <td>$234,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Bruno Nash</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>38</td>-->
<!--                                        <td>2011/05/03</td>-->
<!--                                        <td>$163,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Sakura Yamamoto</td>-->
<!--                                        <td>Support Engineer</td>-->
<!--                                        <td>Tokyo</td>-->
<!--                                        <td>37</td>-->
<!--                                        <td>2009/08/19</td>-->
<!--                                        <td>$139,575</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Thor Walton</td>-->
<!--                                        <td>Developer</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>61</td>-->
<!--                                        <td>2013/08/11</td>-->
<!--                                        <td>$98,540</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Finn Camacho</td>-->
<!--                                        <td>Support Engineer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>47</td>-->
<!--                                        <td>2009/07/07</td>-->
<!--                                        <td>$87,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Serge Baldwin</td>-->
<!--                                        <td>Data Coordinator</td>-->
<!--                                        <td>Singapore</td>-->
<!--                                        <td>64</td>-->
<!--                                        <td>2012/04/09</td>-->
<!--                                        <td>$138,575</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Zenaida Frank</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>63</td>-->
<!--                                        <td>2010/01/04</td>-->
<!--                                        <td>$125,250</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Zorita Serrano</td>-->
<!--                                        <td>Software Engineer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>56</td>-->
<!--                                        <td>2012/06/01</td>-->
<!--                                        <td>$115,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jennifer Acosta</td>-->
<!--                                        <td>Junior Javascript Developer</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>43</td>-->
<!--                                        <td>2013/02/01</td>-->
<!--                                        <td>$75,650</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Cara Stevens</td>-->
<!--                                        <td>Sales Assistant</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>46</td>-->
<!--                                        <td>2011/12/06</td>-->
<!--                                        <td>$145,600</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Hermione Butler</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>47</td>-->
<!--                                        <td>2011/03/21</td>-->
<!--                                        <td>$356,250</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Lael Greer</td>-->
<!--                                        <td>Systems Administrator</td>-->
<!--                                        <td>London</td>-->
<!--                                        <td>21</td>-->
<!--                                        <td>2009/02/27</td>-->
<!--                                        <td>$103,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Jonas Alexander</td>-->
<!--                                        <td>Developer</td>-->
<!--                                        <td>San Francisco</td>-->
<!--                                        <td>30</td>-->
<!--                                        <td>2010/07/14</td>-->
<!--                                        <td>$86,500</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Shad Decker</td>-->
<!--                                        <td>Regional Director</td>-->
<!--                                        <td>Edinburgh</td>-->
<!--                                        <td>51</td>-->
<!--                                        <td>2008/11/13</td>-->
<!--                                        <td>$183,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Michael Bruce</td>-->
<!--                                        <td>Javascript Developer</td>-->
<!--                                        <td>Singapore</td>-->
<!--                                        <td>29</td>-->
<!--                                        <td>2011/06/27</td>-->
<!--                                        <td>$183,000</td>-->
<!--                                    </tr>-->
<!--                                    <tr>-->
<!--                                        <td>Donna Snider</td>-->
<!--                                        <td>Customer Support</td>-->
<!--                                        <td>New York</td>-->
<!--                                        <td>27</td>-->
<!--                                        <td>2011/01/25</td>-->
<!--                                        <td>$112,000</td>-->
<!--                                    </tr>-->
<!--                                    </tbody>-->
<!--                                    <tfoot>-->
<!--                                    <tr>-->
<!--                                        <th>Name</th>-->
<!--                                        <th>Position</th>-->
<!--                                        <th>Office</th>-->
<!--                                        <th>Age</th>-->
<!--                                        <th>Start date</th>-->
<!--                                        <th>Salary</th>-->
<!--                                    </tr>-->
<!--                                    </tfoot>-->
<!--                                </table>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--                &lt;!&ndash; end data table multiselects  &ndash;&gt;-->
<!--                &lt;!&ndash; ============================================================== &ndash;&gt;-->
<!--            </div>-->
        </div>
        <!-- ============================================================== -->
        <!-- footer -->
        <!-- ============================================================== -->
        <div class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                        Copyright © 2018 Concept. All rights reserved.
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                        <div class="text-md-right footer-links d-none d-sm-block">
                            <a href="javascript: void(0);">About</a>
                            <a href="javascript: void(0);">Support</a>
                            <a href="javascript: void(0);">Contact Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- end footer -->
        <!-- ============================================================== -->
    </div>
</div>
<!-- ============================================================== -->
<!-- end main wrapper -->
<!-- ============================================================== -->
<!-- Optional JavaScript -->
<script th:src="@{/assets/vendor/jquery/jquery-3.3.1.min.js}"></script>
<script th:src="@{/assets/vendor/bootstrap/js/bootstrap.bundle.js}"></script>
<script th:src="@{/assets/vendor/slimscroll/jquery.slimscroll.js}"></script>
<script th:src="@{/assets/vendor/multi-select/js/jquery.multi-select.js}"></script>
<script th:src="@{/assets/libs/js/main-js.js}"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script th:src="@{/assets/vendor/datatables/js/dataTables.bootstrap4.min.js}"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script th:src="@{/assets/vendor/datatables/js/buttons.bootstrap4.min.js}"></script>
<script th:src="@{/assets/vendor/datatables/js/data-table.js}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.0.4/js/dataTables.rowGroup.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/js/vue.min.js}"></script>
<script>
    new Vue({
        el: "#admin",
        data: {
            keyword: '',    // 搜索的关键字
            page: 1,
            per_page: 10,
            results: [],     // 搜索的结果
            searchTime: '',
            flagSubTitle: false
        },
        methods: {
            getData() {
                let keyword = this.keyword;
                let page = this.page;
                let per_page = this.per_page;
                console.log(keyword);
                axios.get("/hot/v2/" + keyword + "?page=" + page + "&per_page=" + per_page).then(response => {
                    this.results = response.data;    // 绑定数据
                    this.searchTime = this.results[0]['gmtCreate'];
                    for (let i = 0; i < this.results.length; i++) {
                        if (this.results[i]['subTitle'] && this.results[i]['subTitle'] !== '') {
                            this.flagSubTitle = true;
                            break;
                        }
                    }
                });
            }

        }
    })
</script>
</body>

</html>